<template>
  <div class="illumination">
    <div class="title">告警列表</div>
    <div class="table-box">
      <div class="select-box">
        <Cascader
          size="small"
          class="select-item"
          placeholder="区域"
          :data="cityList"
          v-model="model0"
          change-on-select
        ></Cascader>
        <Select
          clearable
          v-model="model1"
          size="small"
          class="select-item"
          placeholder="客户名称"
        >
          <Option
            v-for="(item, index) in userList"
            :value="item.custId"
            :key="item.custName"
            >{{ item.custName }}
          </Option>
        </Select>
        <Select
          clearable
          v-model="model2"
          size="small"
          class="select-item"
          placeholder="设备类型"
        >
          <Option
            v-for="item in deviceList"
            :value="item.equipTypeNo"
            :key="item.equipTypeNo"
            >{{ item.equipTypeName }}
          </Option>
        </Select>
        <Select
          clearable
          v-model="model3"
          size="small"
          class="select-item"
          placeholder="厂站"
        >
          <Option
            v-for="(item, index) in siteList"
            :value="item.siteId"
            :key="item.siteId"
            >{{ item.siteName }}
          </Option>
        </Select>
        <Button
          @click="search"
          size="small"
          type="primary"
          style="margin-left:30px;padding: 0 10px;"
          >查询
        </Button>
        <Button @click="reset" size="small" style="padding: 0 10px;"
          >重置</Button
        >
      </div>

      <Table border :columns="columns1" :data="tableData"></Table>
    </div>
    <div class="pagination">
      <span
        >共{{ page.totalNum }}条记录 第{{ page.currentPage }}/{{
          Math.ceil(page.totalNum / page.pageSize) || 1
        }}页
      </span>
      <Page
        show-sizer
        @on-change="goPage"
        @on-page-size-change="goPageSize"
        :total="page.totalNum"
        :page-size="page.pageSize"
        :page-size-opts="page.pageSizeOpts"
        show-elevator
      />
    </div>
  </div>
</template>

<script>
import {
  getAlarmOrgtree,
  selectBaseInfosByCustId,
  listEquipTypeNoPaging,
  getSubstationsAll,
  userControlList
} from "@/api/scada";

export default {
  name: "description",
  props: {},
  data() {
    return {
      cityList: [],
      userList: [],
      deviceList: [],
      siteList: [],
      model0: [],
      model1: "",
      model2: "",
      model3: "",
      description: {},
      page: {
        currentPage: 1,
        pageSize: 5,
        totalNum: 0,
        pageSizeOpts: [5, 10, 15, 20]
      },
      columns1: [
        // {
        //     type: 'index',
        //     width: 100,
        //     title: '序号',
        //     align: 'center'
        // },
        {
          title: "客户名称",
          key: "custName",
          render: (h, params) => {
            return h(
              "div",
              {
                on: {
                  click: () => {
                    console.log(params);
                    sessionStorage.setItem(
                      "controlBasicInfo",
                      JSON.stringify(params.row)
                    );
                    this.$router.push({ name: "userControl" });
                  }
                }
              },
              [h("a", params.row.custName)]
            );
          }
        },
        { title: "厂站名称", key: "siteName" },
        { title: "设备名称", key: "equipName" },
        // {
        //     title: '在线状态', key: 'custStatus', render: (h, params) => {
        //         return h('div', [
        //             h('span', ['通', '断'][params.row.loopOnOffState])
        //         ])
        //     }
        // },
        // {
        //     title: '实时值', key: 'controlRunState', render: (h, params) => {
        //         return h('div', [
        //             h('span', ['正常', '异常'][params.row.controlRunState])
        //         ])
        //     }
        // },
        { title: "今日告警", key: "alarmNum", width: 120, align: "center" }
      ],
      tableData: [],
      dataOriginal: []
    };
  },
  computed: {},
  created() {},
  mounted() {
    getAlarmOrgtree().then((ret) => {
      const { code, result } = ret || {};
      if (code === 200) {
        const nextResult = result ? [result] : [];
        this.cityList = this.getTreeDataList(nextResult);
        sessionStorage.setItem("cityList", JSON.stringify(this.cityList));
        console.log(this.cityList);
      }
    });
    selectBaseInfosByCustId().then((res) => {
      if (res.code === 200) {
        this.userList = res.result || [];
      }
    });
    listEquipTypeNoPaging().then((res) => {
      if (res.code === 200) {
        this.deviceList = res.result || [];
      }
    });
    getSubstationsAll().then((res) => {
      if (res.code === 200) {
        this.siteList = res.result || [];
      }
    });
    this.getTableData();
  },
  watch: {},
  methods: {
    getTreeDataList(tree) {
      return tree.map((element) => {
        const { areaNo, areaName, children: prevChildren } = element;
        let children = [];
        if (Array.isArray(prevChildren) && prevChildren.length > 0) {
          children = this.getTreeDataList(prevChildren);
        }
        return {
          value: areaNo,
          label: areaName,
          children
        };
      });
    },
    getTableData(data = {}) {
      userControlList(data).then((res) => {
        const { code, result = {} } = res;
        if (code === 200) {
          this.dataOriginal = result.custom || [];
          this.page.totalNum = this.dataOriginal.length;
          this.initLamp();
        }
      });
    },
    reset() {
      this.model0 = [];
      this.model1 = "";
      this.model2 = "";
      this.model3 = "";
      this.getTableData();
    },
    search() {
      let data = {};
      console.log(this.model0);
      this.model0 && (data.areaNo = this.model0.slice(-1)[0]);
      this.model1 && (data.custId = this.model1);
      this.model2 && (data.equipType = this.model2);
      this.model3 && (data.siteId = this.model3);
      this.getTableData(data);
    },
    goPageSize(page) {
      this.page.pageSize = page;
      this.initLamp();
    },
    goPage(page) {
      this.page.currentPage = page;
      this.initLamp();
    },
    initLamp() {
      let start = this.page.pageSize * (this.page.currentPage - 1);
      let end = this.page.pageSize;
      this.tableData = this.dataOriginal.slice(start, start + end);
    }
  },
  components: {}
};
</script>

<style scoped lang="scss">
.illumination {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 5px;
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.13);
  .title {
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    color: #333;
    font-weight: 500;
    border-bottom: 1px solid #c7c7c7;
    position: relative;
    width: 100%;
  }
  .table-box {
    padding: 15px;
    .select-box {
      padding-bottom: 15px;
      display: flex;
      .select-item {
        width: 120px;
        margin-right: 10px;
      }
    }
  }
}

.illumination .pagination {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #c7c7c7;
  padding: 10px 15px;
}

.illumination .pagination span {
  font-size: 14px;
  font-family: SimSun;
  font-weight: 400;
  color: #666666;
}
</style>
<style lang="scss" scoped>
/deep/ .ivu-table-tip table tr td {
  text-align: center;
  background-image: url("~@/assets/img/zwsj.png");
  background-position: center 60px;
  background-repeat: no-repeat;
  color: #999;
  height: 369px;
  background-size: 190px;
  span {
    display: none;
  }
}
</style>
